<template>
  <div class="search-index">
    <div class="search-wrap">
      <div class="search-title">
        <h2 class="search-key">{{queryInfo.keywords}}</h2>
        <span class="sing" v-show="activeName==='sing'">共找到{{singList.total}}个结果</span>
        <span class="singGroup" v-show="activeName==='singGroup'">共找到{{singGroup.total}}个结果</span>
        <span class="mv" v-show="activeName==='mv'">共找到{{mv.total}}个结果</span>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
        <!-- 歌曲 -->
        <el-tab-pane label="歌曲" name="sing">
          <el-table :data="singList.list" style="width: 100%" @row-click="playMusic">
            <el-table-column type="index" width="50" label="#">
            </el-table-column>
            <el-table-column label="音乐标题">
              <template v-slot="scope">
                <span>{{scope.row.name}}</span>
                <el-tooltip effect="dark" content="添加到播放列表" placement="top">
                  <i class="iconfont icon-jiahao" @click="playMusic(scope.row)"></i>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="artists[0].name" label="歌手">
            </el-table-column>
            <el-table-column prop="album.name" label="专辑">
            </el-table-column>
            <el-table-column label="时长">
              <template v-slot="scope">
                <span>{{scope.row.duration | formatDuration}}</span>
              </template>
            </el-table-column>
          </el-table>
          <search-pagination :num="num" :limit="queryInfo.limit" :total="singList.total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
        </el-tab-pane>
        <!-- 歌单 -->
        <el-tab-pane label="歌单" name="singGroup" class="singGroup">
          <ul>
            <li v-for="(item,index) in singGroup.list" :key="index">
              <img v-lazy="item.coverImgUrl" alt="" @click="itemClick(item)">
              <div class="play-count"><i class="iconfont icon-bofang"></i>{{item.playCount | initVolume}}</div>
              <i class="iconfont icon-sanjiaoright
" @click="playMsg(item)"></i>
              <div class="singer-name">{{item.name}}</div>
            </li>
          </ul>
          <search-pagination :num="num" :limit="queryInfo.limit" :total="singGroup.total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
        </el-tab-pane>
        <!-- mv -->
        <el-tab-pane label="MV" name="mv" class="playMv">
          <ul>
            <li v-for="(item,index) in mv.list" :key="index">
              <img v-lazy="item.cover" alt="">
              <div class="play-count"><i class="iconfont icon-bofang"></i>{{item.playCount |
                 initVolume}}</div>
              <p class="desc">{{item.name}}</p>
            </li>
          </ul>
          <search-pagination :num="num" :limit="queryInfo.limit" :total="mv.total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getSearchData } from '@/api/search'

import { getSongList, getSongDetailById } from '@/api/Personal'

import SearchPagination from './SearchPagination'

export default {
  name: 'SearchIndex',
  data() {
    return {
      queryInfo: {
        limit: 10,
        offset: 0,
        type: 1, // 歌曲:1 歌单:1000 MV:1004
        keywords: this.$route.params.content
      },
      singList: {
        list: [],
        total: 0
      },
      singGroup: {
        list: [],
        total: 0
      },
      mv: {
        list: [],
        total: 0
      },
      activeName: 'sing',
      num: 1,
      musicList: []
    }
  },
  created() {
    this.getSearchMsg()
  },
  mounted() {
    this.$bus.$on('searchClick', val => {
      this.queryInfo.keywords = val
      this.getSearchMsg()
    })
  },
  methods: {
    getSearchMsg() {
      getSearchData(this.queryInfo).then(res => {
        if (this.queryInfo.type === 1) {
          this.singList.list = res.data.result.songs
          this.singList.total = res.data.result.songCount
        } else if (this.queryInfo.type === 1000) {
          this.singGroup.list = res.data.result.playlists
          this.singGroup.total = res.data.result.playlistCount
        } else if (this.queryInfo.type === 1004) {
          this.mv.list = res.data.result.mvs
          this.mv.total = res.data.result.mvCount
        }
      })
    },
    handleClick(val) {
      if (val === 'singGroup') {
        this.queryInfo.type = 1000
      } else if (val === 'mv') {
        this.queryInfo.limit = 8
        this.queryInfo.type = 1004
      } else if (val === 'sing') {
        this.queryInfo.type = 1
      }
      console.log(this.queryInfo.type)
      if (this.singList.total !== 0 && this.singGroup.total !== 0 && this.mv.total !== 0) return null
      this.getSearchMsg()
    },
    itemClick(val) {
      window.sessionStorage.setItem('id', val.id)
      this.$router.push(`/home/detail/${val.id}`)
    },
    playMsg(val) {
      this.getSongList(val.id)
      // this.playMusic
    },
    // 获取歌单信息
    async getSongList(id) {
      const { data: res } = await getSongList(id)
      this.musicList = res.playlist
      const arr = []
      res.playlist.trackIds.find(item => {
        arr.push(item.id)
      })
      // 获取歌曲详情
      const { data: sing } = await getSongDetailById(arr)
      this.musicList = sing.songs
      this.playmusic()
    },
    playmusic() {
      this.musicList.find(item => {
        this.playMusic(item)
      })
    },
    handleSizeChange(page) {
      this.queryInfo.limit = page
      this.getSearchMsg()
    },
    handleCurrentChange(num) {
      this.queryInfo.offset = (num - 1) * this.queryInfo.limit
      this.getSearchMsg()
    }
  },
  components: {
    SearchPagination
  }
}
</script>

<style lang="less" scoped>
.search-index {
  padding: 20px 0;
}
.icon-jiahao {
  color: red;
  margin-left: 10px;
}
.singGroup {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 250px;
      margin: 10px;
      overflow: hidden;
      &:hover .play-count {
        display: none;
      }
      &:hover .icon-sanjiaoright {
        display: block;
      }
      .icon-sanjiaoright {
        display: none;
        position: absolute;
        right: 5%;
        bottom: 20%;
        color: red;
        font-size: 40px;
        transition: all 3s;
      }
      img {
        width: 100%;
      }
      .play-count {
        position: absolute;
        top: -20%;
        left: 0;
        right: 0;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.5));
        text-align: right;
        color: #fff;
        padding: 5px 10px;
        animation: songs_top_bottom 0.5s linear forwards;
        i {
          margin-right: 5px;
          font-size: 18px;
        }
      }
    }
  }
}
.playMv {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 22%;
      margin: 10px 15px;
      img {
        width: 100%;
      }
      .play-count {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: right;
        color: #fff;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.5));
        padding: 5px 8px;
        i {
          margin-right: 5px;
        }
      }
      p {
        text-align: center;
      }
    }
  }
}
</style>